<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="main" style="width:800px;height:600px;"></div>
		<script src="./js/echarts.min.js"></script>
		<script>
			const foodArr =[
				{name:"苹果",value:1330},
				{name:"香蕉",value:12223},
				{name:"火龙果",value:4310},
				{name:"荔枝",value:1350},
				{name:"榴莲",value:102343},
				{name:"山竹",value:1560},
				{name:"芭乐",value:1340}
			]
			const myChart = echarts.init(document.querySelector("#main"))
			//绘图参数 配置项
			const option={
				title:{
					text:"水果的售价"
				},
				legend:{
					right:'5%',
					data:['价格']
				},
				grid:{
					left:'20%',
				},
				xAxis:{
					data:foodArr.map(v => v.name)
					//data:[xxxx,xxxx,xxxx,zzzz]
				},
				yAxis:{
					//Y轴分割线
					splitLine:{
						lineStyle:{
							type:"dotted"
						}
					}
				},
				//提示框组件
				tooltip:{
					//触发方式 默认图形
					trigger:'axis'
				},
				series:[
					{
						name:'价格',
						type:'bar',
						data:foodArr.map(v => v.value)
					}
				],
				
				//#_ _ _ _ _ _
				// 	R R G G B B
				color:['#86cce9']
			}
			myChart.setOption(option)
		</script>
	</body>
</html>